<script setup lang="ts">
import BreadCrumbs from '@/components/BreadCrumbs.vue';
import BannerImage from '@/components/BannerImage.vue';
import AllSort from '../Category/components/allSort.vue';
import request from '../../utils/request';
import GoodsList from './components/goodsList.vue';
import RelatedTopics from './components/RelatedTopics.vue';
import { onMounted, ref } from 'vue';
let imgList = ref([]);
onMounted(async () => {
  const data = await request.get('/home/index');
  console.log(data);

  imgList.value = data.result.imageBanners;
});
</script>
<template>
  <div class="container">
    <!-- 面包屑组件 -->
    <BreadCrumbs class="page" parentName="二级" parentPath="/"> </BreadCrumbs>
    <!-- 轮播图 -->
    <BannerImage :imgList="imgList" :duration="2000" autoPlay></BannerImage>
    <!-- 全部分类 -->
    <AllSort></AllSort>
    <!--商品列表-->
    <GoodsList
      v-for="item in 8"
      :key="item"
      title="- 哈哈 -"
      descript="温暖柔软，品质之选"
    ></GoodsList>
    <!--相关专题-->
    <RelatedTopics title="相关专题"></RelatedTopics>
  </div>
</template>
<style lang="less">
.page {
  padding: 30px 10px;
}
.container {
  width: 1240px;
  margin: 0 auto;
}
.banner {
  width: 1240px;
  height: 500px;
  overflow: hidden;
}
</style>
